<template>
  <div>
    <div class="search">
      <div class="top">
        Enjoy Music
        <div class="button" @click="$router.go(-1)">
          <span class="iconfont icon-arrow-left-bold"></span>
        </div>
      </div>
      <div class="box">
        <div class="box1">
          <input
            type="text"
            class="inp"
            placeholder="搜索歌曲、歌手、专辑"
            v-model="value"
            @keyup.enter="
              getDetailSong;
              save();
            "
          />
          <div class="right iconfont icon-search"></div>
        </div>
      </div>
    </div>
    <div class="hot" v-show="flag">
      <p>热门搜索</p>
      <ul>
        <li
          v-for="(item, index) in hots"
          :key="index"
          ref="text"
          @click="get(index)"
        >
          {{ item.first }}
        </li>
      </ul>
    </div>

    <div class="history" v-show="show">
      <p>搜索历史<span @click="delAll">全部清除</span></p>
      <ul>
        <li v-for="(item3, index3) in history1" :key="index3">
          {{ item3 }}<span @click="del(index3)">X</span>
        </li>
      </ul>
    </div>

    <dl class="musiclist" v-show="!flag">
      <dd
        v-for="(item1, index1) in songs"
        :key="index1"
        @click="playmusic(item1.id, item1.name, item1)"
      >
        <h1>{{ index1 + 1 }}</h1>
        <div class="info">
          <h2>{{ item1.name }}</h2>
          <h3>
            <span v-for="(item2, index2) in item1.artists" :key="index2"
              >{{ item2.name }}&nbsp;&nbsp;</span
            >
          </h3>
        </div>
      </dd>
    </dl>
  </div>
</template>

<style lang="less" scoped>
.search {
  width: 100%;
  .top {
    width: 100%;
    height: 84px;
    line-height: 84px;
    background-color: #0379db;
    font-size: 25px;
    text-indent: 2em;
    color: white;
  }
  .box {
    padding: 15px 10px;
    border-bottom: 2px solid #f1f2f3;
    .box1 {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding: 0 30px;
      border-radius: 30px;
      box-sizing: border-box;
      background: #ebecec;
      position: relative;
      .inp {
        width: 100%;
        display: block;
        height: 30px;
        line-height: 18px;
        font-size: 14px;
        border-radius: 30px;
        position: absolute;
        top: 0;
        left: 0px;
        border: none;
        background: #ebecec;
        text-indent: 2em;
      }
      .right {
        position: absolute;
        top: 0;
        left: 8px;
        color: #d4d4d5;
      }
    }
  }
}
.hot {
  width: 95%;
  margin: 0 auto;
  padding: 15px 10px 0;
  p {
    font-size: 12px;
    line-height: 12px;
    color: #666;
  }
  ul {
    list-style: none;
    height: 90px;
    margin: 10px 0 7px;
    li {
      display: inline-block;
      height: 32px;
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 0 14px;
      font-size: 14px;
      line-height: 32px;
      color: #333333;
      border: 1px solid #e7e8eb;
      border-radius: 32px;
      float: left;
    }
  }
}
.musiclist {
  border-radius: 12px;
  background-color: #fff;
  position: relative;
  top: -12px;
  min-height: 200px;
  dt {
    height: 61px;
    line-height: 61px;
    border-bottom: 1px solid #e2e2e2;
    font-size: 25px;
    color: #131615;
    text-indent: 1em;
    span {
      font-size: 23px;
      color: #616262;
    }
  }
  dd {
    height: 91px;
    border-bottom: 1px solid #e2e2e2;
    display: flex;
    h1 {
      flex: 0 0 78px;
      line-height: 91px;
      text-align: center;
      font-size: 28px;
      color: #707271;
      font-weight: normal;
    }
    .info {
      flex: 1;
      h2 {
        font-size: 25px;
        color: #3a3c3c;
        margin-top: 18px;
        font-weight: normal;
        overflow: hidden;
      }
      h3 {
        margin-top: 10px;
        font-size: 20px;
        color: #777978;
        font-weight: normal;
        overflow: hidden;
      }
    }
  }
}

.button {
  position: absolute;
  color: #fff;
  left: -94px;
  top: 22px;
  height: 40px;
  line-height: 40px;
  font-size: 35px;
  span {
    display: inline-block;
    font-size: 40px;
    vertical-align: top;
  }
}

.history {
  width: 95%;
  margin: 0 auto;
  padding: 15px 10px 0;
  p {
    font-size: 12px;
    line-height: 12px;
    color: #666;
    position: relative;
    span{
      width: 50px;
      height: 20px;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  ul {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 10px 0;
    li {
      width: 100%;
      position: relative;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.5);
      text-indent: 1em;
      span {
        position: absolute;
        right: 10px;
        top: 0;
      }
    }
  }
}
</style>

<script>
import { getHotSongs, getSongs } from "../../api/search";

export default {
  data() {
    return {
      hots: [],
      songs: [],
      ar: [],
      value: "",
      flag: true,
      show: false,
      artist: {
        img1v1Url: "",
      },
      name: [],
      history1:[]
    };
  },
  methods: {
    getDetailHotSong() {
      getHotSongs().then((data) => {
        console.log(data.result.hots)
        this.hots = data.result.hots;
      });
    },
    getDetailSong() {
      if (this.value.replace(/^ +| +$/g,'')=='') {
        this.flag = true;
        return;
      }
      getSongs({ keywords: this.value }).then((data) => {
        // console.log(data.result.songs)
        this.songs = data.result.songs;
      });
      this.flag = !this.flag;
    },
    get(index) {
      // console.log(index)

      this.value = this.$refs.text[index].innerText;
      this.$store.commit("things2", this.value);
      getSongs({ keywords: this.value }).then((data) => {
        // console.log(data.result.songs);
        this.songs = data.result.songs;
        this.show = false;
      });
      this.flag = false;
      this.show = true;
    },
    save() {
      // console.log(this.value);
      //正则判断输入框是否有内容
      if (this.value.replace(/^ +| +$/g,'')=='') {
        this.flag = true;
      }else{
      getSongs({ keywords: this.value }).then((data) => {
        // console.log(data.result.songs);
        this.songs = data.result.songs;
        this.show = false;
      });
      this.$store.commit("things2", this.value);
      console.log(this.name,"xoihsuj")
      this.flag = false;
      }
      this.show = true;
    },
    playmusic(id, name, item1) {
      console.log(id);
      console.log(name);
      let playMusicData = {
        coverImgUrl: item1.artists[0].img1v1Url,
        id,
        name,
        ar: item1.artists,
      };
      // 数据存存储
      this.$store.commit("musicDatafun", playMusicData);
    },
    del(index3){
        this.$store.commit("del1",index3);
    },
    delAll(){
        this.$store.commit("del");
        this.show=false
    }
  },
  created() {
    this.getDetailHotSong();
    this.history1 = this.$store.state.history;
    if(this.history1.length != 0){
      this.show = true
    }
  }
};
</script>
